<script setup>
import {UseSettingInfo} from "./hook/use_setting_info";

const {
  myAvatarUrlNormal,
  myAvatarUrl,
  codeText,
  myCode,
  verify,
  nickname,
  userPhone,
  mtPhone,
  userCode,
  verifyCodeImg,
  show,
  onChooseAvatar,
  getInputValue,
  getCode,
  codeChange,
  yesGetCode,
  toMTHelp,
  handleChangeNickname,
  getPermission,
  uploadMyImg
} = UseSettingInfo()

</script>

<template>
  <u-navbar
      title="设置用户信息"
      placeholder
      titleStyle="color:black"
      leftIconColor="#000"
      auto-back
  >
  </u-navbar>
  <view class="container">

    <!-- #ifdef MP -->
    <button size="default" type="default" class="avatar-wrapper up-button"
            style="color:#000000;backgroundColor:white;borderColor:#white"
            open-type="chooseAvatar" >
      <image class="avatar" :src="myAvatarUrl ? myAvatarUrl : myAvatarUrlNormal"></image>
    </button>
    <!--#endif-->
    <!-- #ifdef APP-PLUS-->
    <view class="avatar-wrapper" @click="getPermission()">
      <image class="avatar" :src="myAvatarUrl ? myAvatarUrl : myAvatarUrlNormal"></image>
    </view>
    <!--#endif-->
    <!-- #ifdef H5-->
    <view class="avatar-wrapper" @click="uploadMyImg()">
      <image class="avatar" :src="myAvatarUrl ? myAvatarUrl : myAvatarUrlNormal"></image>
    </view>
    <!--#endif-->
    <view class="nickname-c">
      <text class="nickname-title">昵称</text>
      <input type="nickname" class="weui-input" v-model="nickname" placeholder="请输入昵称" @blur='getInputValue'/>
    </view>
    <view class="phone-c">
      <text class="phone-title">手机号</text>
      <input type="number" class="weui-input" v-model="userPhone" placeholder="请输入手机号"/>
    </view>
    <view class="phone-c">
      <text class="phone-title">美团账号</text>
      <input type="number" class="weui-input" v-model="mtPhone" placeholder="请输入美团绑定的手机号"/>
    </view>
    <view class="code-c">
      <text class="code-title">验证码</text>
      <input type="number" class="weui-input" v-model="userCode" placeholder="请输入验证码"/>
      <view class="code-brn" @click="getCode">{{ !verify ? '获取验证码' : codeText }}</view>
      <up-code ref="myCode" @change="codeChange"></up-code>
    </view>
    <view class="save">
      <button class="save-btn" @click="handleChangeNickname">
        <text>保存设置</text>
      </button>
    </view>
  </view>
  <view style="text-align: center; width: 100%;font-size: 24rpx;color: #ff7400;">
    注：首次注册并绑定手机号赠送会员
  </view>
  <view style="text-align: center;font-size: 22rpx;color: #A8A8A8;margin: 30rpx 58rpx;line-height:46rpx;">
    手机号用于订单状态通知，以及订单将要过期时提醒您处理等，绑定美团账号后，可以获取美团官方霸王餐商家，官返秒返等权限，美团账号非订单收餐手机号
  </view>
  <view @click="toMTHelp"
        style="text-align: center; width: 100%;font-size: 28rpx;color: #33acff;text-decoration: underline 0.2em">
    查看美团账号教程
  </view>
  <up-popup :show="show" mode="center" :closeable="true" :round="10" @close="show = false" :safeAreaInsetBottom="false">
    <view class="shadow_box">
      <view class="img_code">图形验证码:</view>
      <image style="width: 160rpx;height: 50rpx;margin: 20rpx 0;" @click="getVerify" :src="verifyCodeImg"></image>
      <view class="phone-input">
        <up-input
            border="none"
            class="inputWidth"
            :customStyle="{fontSize: '26rpx',marginTop: '10rpx',padding:'20rpx',background: '#F2F2F2'}"
            v-model="verify"
            type="number"
            placeholderStyle="divcolor"
            placeholder="请输图形验证码"
        />
      </view>
      <button class="code-btn" @click="yesGetCode">
        <text>确定</text>
      </button>
    </view>
  </up-popup>
</template>


<style lang="scss" scoped>
.up-button:after{
 border: none;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  padding: 50rpx;
}

.avatar-wrapper {
  padding: 0;
  margin-top: 50rpx;
}

.avatar {
  width: 168rpx;
  height: 168rpx;
  border-radius: 16rpx;
  border: 1rpx #dddddd solid;
}

.nickname-c, .phone-c, .code-c {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 50rpx 0 0;
}

.nickname-c {
  margin-top: 60rpx;
}

.nickname-title, .phone-title, .code-title {
  font-size: 28rpx;
  padding: 0 20rpx;
  width: 128rpx;
}

.code-brn {
  color: #007AFF;
  padding: 10rpx 16rpx;
  text-align: center;
  font-size: 32rpx;
  transition: all .3s linear;
}

.weui-input {
  flex: 1;
  background-color: #f8f8f8;
  padding: 16rpx 20rpx;
}

.save-btn {
  margin-top: 68rpx;
  width: 650rpx;
  color: #fff;
  border-radius: 50rpx;
  background: linear-gradient(90deg, #fc605b, #fb9360);
}

.code-btn {
  margin-top: 50rpx;
  width: 460rpx;
  color: #fff;
  border-radius: 50rpx;
  background: linear-gradient(90deg, #fc605b, #fb9360);
}

.shadow_box {
  box-sizing: border-box;
  padding: 60rpx 40rpx;

  .img_code {
    font-size: 28rpx;
    font-weight: bold;
  }
}

.phone-input {
  margin-bottom: 30rpx;
}

</style>
